<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>用户列表</title>
	<script id="tmpl_role" type="text/x-jquery-tmpl">
	<form id="meberForm">
	<input type="hidden" name="userId" value="{{= $item.userId}}" />
	<table class="table table-bordered table-striped with-check">
    	<thead>
        <tr>
        	<th><input type="checkbox" name="title-table-checkbox" /></th>
            <th>角色</th>
         </tr>
         </thead>
         <tbody>
			{{each returnObject}}
         	<tr>
            	<td class="control-group"><input type="checkbox" name="groupId" {{if true==$value.isCheck}}checked="checked"{{/if}} value="{{= $value.groupId}}" /></td>
                <td>{{= $value.groupName}}</td>
            </tr>
			{{/each}}
         </tbody>
    </table>
	</form>
	</script>
	<script type="text/javascript">
	<!--
	$(function(){
		$(":button.usergroup").on("click",function(){
			var userId = $(this).parents("tr").find("td:first-child :hidden").val();
			$.post("${pageContext.request.contextPath}/sysuser/getSysUserGroups.do",{"userId":userId},function(data){
				console.info(userId);
				if(true == data.isSuccess){
					$("#myRole .modal-body").empty();
					$("#tmpl_role").tmpl(data,{"userId":userId}).appendTo("#myRole .modal-body");
					$("#meberForm").validate({
						rules:{
							groupId:{
								required:true
							}
						}
						, messages:{
							groupId:{
								required:"选择"
							}
						}
						,submitHandler:function(form){
							$(form).ajaxSubmit({
								url:"${pageContext.request.contextPath}/sysuser/saveSysUserGroupMebers.do"
								,type:"post"
								,dataType:"json"
								,success:function(data){
									$("#myRole").modal("hide");
									if(true == data.isSuccess)
										$("#tmpl_alert").tmpl({type:"success", title:"成功",message:data.returnObject}).appendTo("#message_alert");
									else{
										$("#tmpl_alert").tmpl({type:"error",title:"失败",message:data.errorMsg}).appendTo("#message_alert");
									}
								}
							});
						}
					});
					
					$("#myRole").modal();
				}else{
					$("#myRole .modal-body").html(data.errorMsg);
				}
			},"json");
		});
		
		$("#btn_sub").bind("click",function(){
			$("#meberForm").trigger("submit");
		});
	});
	//-->
	</script>
</head>
<body>
	<div class="container-fluid">
    <hr>
    <div class="row-fluid">
      <div class="span12"><a href="${pageContext.request.contextPath }/sysuser/createSysUser.do" class="btn btn-primary">新增</a></div>
    </div>
    <div class="row-fluid">
      <div class="span12">
      	<div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
            <h5>用户列表</h5>
          </div>
          <div class="widget-content nopadding">
            <table class="table table-bordered data-table">
              <thead>
                <tr>
                  <th>用户名</th>
                  <th>登录名</th>
                  <th>电子邮箱</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
              	<c:forEach items="${pageInfo.list }" var="sysUser">
                <tr class="gradeA">
                  <td><input type="hidden" value="${sysUser.userId }" />${sysUser.userName }</td>
                  <td>${sysUser.loginName }</td>
                  <td>${sysUser.email }</td>
                  <td>
                  	<div class="btn-group">
                  		<a class="btn btn-mini" href="${pageContext.request.contextPath }/sysuser/getSysUser.do?userId=${sysUser.userId}">修改</a><a class="btn btn-mini">删除</a><button class="btn btn-mini usergroup">角色</button>
                  	</div>
                  </td>
                </tr>
              	</c:forEach>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    </div>
    <div id="myRole" class="modal hide">
      <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button">×</button>
        <h3>设置角色</h3>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer"> <button id="btn_sub" type="button" class="btn btn-primary">确定</button> <a data-dismiss="modal" class="btn" href="#">取消</a> </div>
    </div>
</body>
</html>